import Base from "./base.js";
import adminServices from "../service/adminService.js";
import auth from "../utils/auth.js"

export default class extends Base {
    constructor(props) {
        super(props);
        //属性
        this.adminname = props.adminname || "";
    }

    render() {
        const template = `
        <div id="bigBox" style="width:400px;margin:100px auto;border:10px solid rgba(0,0,0,0.2)">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>管理员登录</legend>
            </fieldset>
                <form class="layui-form" action="" >
                        <div class="layui-form-item login-box" style="position: relative;">
                            <input style="width:300px;margin:auto" type="text" name="adminName" maxlength="11" value="${this.adminname}" placeholder="用户名>字母开头" autocomplete="off" class="layui-input"required
                            lay-verify="required|adminName" lay-verType="tips">
                            <i class="layui-icon layui-icon-username" style="font-size: 20px;color:gray; position: absolute;right:55px;top:10px"></i>  
                            <span style="margin-left:50px"></span>
                        </div>
                        <div class="layui-form-item login-box" style="position: relative;">
                            <input  style="width:300px;margin:auto" type="password" name="adminPassword" 
                                placeholder="密码" autocomplete="off" class="layui-input" required lay-verify="required|pass" lay-verType="tips">
                                <i class="layui-icon layui-icon-password" style="font-size: 20px;color:gray; position: absolute;right:55px;top:10px"></i>
                        </div>

                        <div class="layui-form-item ">
                                <button style="width:300px;margin-left:50px" class="layui-btn loginBtn" type="button" >立即登录</button>
                                <a id="regBtn" href="#/reg" style="float:left; margin-left:50px;margin-top:10px;color:red"  class="regBtn">还没有账号？立即注册</a>
                        </div>
                        
                </form>
         </div>
        `
        this.$el.html(template);
    }
    // 方法
    async login(admin) {
        const {status,token}= await adminServices.login(admin);
        if (status) {
            auth.setToken(token);
        }
        return status;
    }
    //交互
    handle() {
        //点击登录按钮事件
        $(".loginBtn").on("click", async e => {
            const adminName = $(".login-box input[name=adminName]").val();
            const adminPassword = $(".login-box input[name=adminPassword]").val();
            if(/^[a-zA-Z]\w{1,10}$/.test(adminName)){
                const status = await this.login({ adminName, adminPassword });
                if (status) {
                    // layer.msg("登录成功！");
                    location.hash = "#/info";
                }else{
                    layer.msg("登录失败");
                }
            }else{
                $(".login-box span").css({ "color": "red" })
                $(".login-box span").html("账号密码有误或为空！");
            }
        });
        //点击立即注册事件
        $(".regBtn").on("click", e => {
            location.hash = "#/reg";
        })
        
        $(".login-box input[name=adminName]").on("blur", e => {
            const adminName = $(".login-box input[name=adminName]").val();
            if(!/^[a-zA-Z]\w{1,10}$/.test(adminName)){
                $(".login-box span").html("账号密码有误或为空！");
                $(".login-box span").css({ "color": "red" })
            }else{
                $(".login-box span").html("");
            }
        })
    }
}